<template>
  <div id="app">
    <div class="app-left">
      <div class="logo">
        <img src="">
      </div>
      <div class="mid">
        <div class="item column center" :class="{'active-item':isThisPage('idconfig')}" @click="navigateTo('idconfig')">
          <img src="./assets/id.svg">
          <span>ID</span>
        </div>
        <div class="item column center" :class="{'active-item':isThisPage('switch')}" @click="navigateTo('switch')">
          <img src="./assets/switch.png">
          <span>配置</span>
        </div>
        <div class="item column center" :class="{'active-item':isThisPage('login')}" @click="navigateTo('login')">
          <img src="./assets/user.png" style="width:26px;">
          <span>账号</span>
        </div>
        <div class="item column center" v-if="$store.state.User.status" @click="duankai">
          <img src="./assets/xx.png">
          <span>断开</span>
        </div>
        <div class="item column center" v-if="!$store.state.User.status">
          <img src="./assets/xx.png">
          <span>未连接</span>
        </div>
      </div>
      <div class="bottom">
      </div>
    </div>
    <div class="app-right">
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>

<script>
import Bus from './utils/bus.js'
  export default {
    name: 'x18front',
    data(){
      return {

      }
    },
    methods:{
      isThisPage:function(routName){
        return this.$route.name === routName;
      },
      navigateTo(where){
        this.$router.push({path:`/${where}`});
      },
      getUserInfo(){
          let token = localStorage.getItem("token");
          if(token!==undefined&&token!==""&&token!==null){
              this.$http.get('/user/info').then(res=>{
                this.$store.dispatch('setUserInfo',res.data);
              })
          } else {
            this.$store.dispatch('setUserInfo',{});
          }
      },
      getStatus(){
          this.$lhttp.get('/status').then(res=>{
            this.$store.dispatch('setStatus',res.data.status);
          })
      },
      duankai(){
        this.$lhttp.get('/duankai').then(res=>{
            this.$message({
              message:"已断开连接",
              type:"success",
              showClose:true
            });
            Bus.$emit('duankai');  
            this.getStatus();
          })
      }
    },
    mounted(){
      this.getUserInfo();
      this.getStatus();
      setInterval(() => {
        this.getUserInfo();
      }, 10000);
      setInterval(()=>{
        this.getStatus();
      },2000)
      Bus.$on('index', () => {  

        if(this.$route.fullPath !== '/login'){
            let backlen = window.history.length - 1;
            window.history.go(-backlen);
            this.$router.replace({ path: '/login' });
        }
      }); 
    }
  }
</script>

<style lang="scss">
body,html{
  padding:0;
  margin:0;
  font-family: PingFangSC-Medium, PingFang SC, 微软雅黑;
  // -webkit-user-select:none;
  // -moz-user-select:none;
  // -ms-user-select:none;
  // user-select:none;
  font-size: .9rem;
  background:#FCFCFC;
}
*{
  box-sizing:border-box;
}
.flex{
  display: flex;
}
.column{
  display: flex;
  flex-direction: column;
}
.row{
  display: flex;
  flex-direction: row;
}
.row-center{
  display: flex;
  justify-content: center;
}
.center{
  display: flex;
  align-items: center;
}
.between{
  display: flex;
  justify-content: space-between;
}
.expand{
  flex:1;
}
#app{
  display: flex;
  height:100vh;
  width:100%;
  .app-left{
    color:white;
    width:80px;
    background:#3B19B5;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: space-between;
    .item{
      margin-bottom:10px;
      cursor: pointer;
      transition:all .3s;
      padding:10px 15px;
      min-width: 60px;
      img{
        width:30px;
        margin-bottom:5px;
      }
    }
    .active-item{
      background: rgba(0,0,0,.23);
      border-radius: 22px;
    }
  }
  .app-right{
    flex:1;
  }
}


.el-message{
  border:none!important;
}
</style>